<template>
    <div class="steps-wrapper">
      <template v-for="(step, index) in showData">
        <div
          class="step-wrapper"
          :class="current === index + 1 ? 'current' : ''"
          @click="handleClick(step, index)"
          :key="index"
        >
          {{ step.title }}<span v-if="step.finish">（已完成）</span>
        </div>
      </template>
    </div>
  </template>
  <script>
  export default {
      name: 'StepList',
      props: {
          current: {
              type: Number,
              default: 1
          },
          data: {
              type: Array,
              default: () => []
          }
      },
      watch: {},
      computed: {
          showData() {
              return this.data.filter((item) => item.show);
          }
      },
      data() {
          return {};
      },
      methods: {
          handleClick(step, index) {
              this.$emit('change-step', index + 1);
          }
      }
  };
  </script>
  <style scoped>
  .steps-wrapper {
    display: flex;
    --step-height: 40px;
    --half-step-height: 20px;
    /* --arrow-step-checked-bgcolor: #155bd4;
    --arrow-step-bgcolor: #b4bcc7;
    --arrow-step-color: #fff;
    --arrow-step-checked-color: #fff;
    --modal-bgcolor: #b4bcc7;
    --card-body-bgcolor: #fff; */
  }
  .step-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--step-height);
    line-height: var(--step-height);
    padding: 0 40px;
    background: var(--step-color);
    margin-right: 4px;
    cursor: pointer;
    /* color: var(--arrow-step-color); */
  }
  .step-wrapper.current {
    background: var(--step-active-color);
    color: #fff;
    /* color: var(--arrow-step-checked-color); */
  }
  .step-wrapper:not(:first-child):before,
  .step-wrapper:not(:last-child):after {
    content: "";
    position: absolute;
    top: 0;
    height: 0;
    width: 0;
    border-left: 15px solid;
    border-right: 15px solid transparent;
    border-top: var(--half-step-height) solid transparent;
    border-bottom: var(--half-step-height) solid transparent;
  }
  .step-wrapper:not(:first-child):before {
    left: 0;
    border-left-color: var(--card-body-bgcolor);
    z-index: 1;
  }
  .ivu-modal .step-wrapper:not(:first-child):before {
    left: 0;
    border-left-color: var(--modal-bgcolor);
    z-index: 1;
  }
  .step-wrapper:not(:last-child):after {
    right: -30px;
    z-index: 2;
    border-left-color: var(--step-color);
  }
  .step-wrapper:not(:last-child).current:after {
    border-left-color: var(--step-active-color);
  }
  </style>
  